<template>
  <div style="padding:36px " class="page-box">
    <div v-loading="tableLoading" element-loading-text="拼命加载中" class="card-box">
      <div class="card">
        <div class="card-tit">
          订单信息
        </div>
        <div class="card-con">
          <div class="card-con-item">
            <div class="card-con-item-tit ">下单时间：</div>
            <div v-if="data.yunXiOrder" class="card-con-item-con ">{{$moment(data.yunXiOrder.createDate)}}</div>
          </div>
          <div class="card-con-item">
            <div class="card-con-item-tit ">订单号：</div>
            <div v-if="data.yunXiOrder" class="card-con-item-con ">{{data.yunXiOrder.orderCode}}</div>
          </div>
          <div class="card-con-item">
            <div class="card-con-item-tit ">票数：</div>
            <div class="card-con-item-con ">{{data.yunXiOrder.total}}</div>
          </div>
          <div class="card-con-item">
            <div class="card-con-item-tit ">规格：</div>
            <div class="card-con-item-con ">
              <span v-for="(item ,index) of data.ticketTypeMap" :key="index">{{item.ticketTypeName}}:{{item.ticketTypeCount}} 张 </span>
            </div>
          </div>
          <div class="card-con-item">
            <div class="card-con-item-tit ">已激活：</div>
            <div class="card-con-item-con ">{{data.isActiveCount}}张</div>
          </div>
          <div class="card-con-item">
            <div class="card-con-item-tit ">未激活：</div>
            <div class="card-con-item-con ">{{data.unActiveCount}}张</div>
          </div>
          <!-- <div class="card-con-item">
            <div class="card-con-item-tit ">失效：</div>
            <div class="card-con-item-con ">{{data.unreviewedCount}}张</div>
          </div> -->
          <div class="card-con-item">
            <div class="card-con-item-tit ">渠道来源：</div>
            <div v-if="data.yunXiOrder&&data.yunXiOrder.source==3" class="card-con-item-con ">{{orderType[data.yunXiOrder.source]}}</div>
            <div v-else class="card-con-item-con ">{{data.yunXiOrder.pricegroupName}}</div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-tit">
          下单人信息
        </div>
        <div class="card-con">
          <div class="card-con-item">
            <div class="card-con-item-tit ">下单人姓名：</div>
            <div class="card-con-item-con ">{{data.yunXiOrder.bName}}</div>
          </div>
          <div class="card-con-item">
            <div class="card-con-item-tit ">下单人手机号：</div>
            <div class="card-con-item-con ">{{data.yunXiOrder.bTel}}</div>
          </div>
          <div class="card-con-item">
            <div class="card-con-item-tit ">下单人公司名称：</div>
            <div class="card-con-item-con ">{{data.yunXiOrder.bCompany}}</div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-tit">
          用票人信息
        </div>
        <div class="card-con">
          <div v-for="(item,index) of fieldList" :key="index" class="card-con-item">
            <div class="card-con-item-tit ">{{item.attribute.titName}}：</div>
            <div class="card-con-item-con "> {{data.yunXiTicket[item.attribute.filedCode]}}</div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-tit">
          门票信息
        </div>
        <div class="card-con">
          <div class="card-con-item">
            <div class="card-con-item-tit ">门票名称：</div>
            <div class="card-con-item-con ">{{data.yunXiTicket.tTypeName}}</div>
          </div>
          <div class="card-con-item">
            <div class="card-con-item-tit ">门票价格：</div>
            <div class="card-con-item-con ">原价: {{data.yunXiTicketType.sprice}}</div>
            <div style="margin-left:16px" class="card-con-item-con "> 现价: {{data.yunXiTicket.realPrice}}</div>
          </div>
          <div class="card-con-item">
            <div class="card-con-item-tit ">门票类型：</div>
            <div class="card-con-item-con ">{{orderType[data.yunXiTicket.state]}}</div>
          </div>
          <div class="card-con-item">
            <div class="card-con-item-tit ">参会地点：</div>
            <div class="card-con-item-con ">{{data.yunXiTicketType.address}}</div>
          </div>
          <!-- <div class="card-con-item">
            <div class="card-con-item-tit ">参会日期：？？？</div>
            <div class="card-con-item-con ">{{}}</div>
          </div> -->
          <div class="card-con-item">
            <div class="card-con-item-tit ">参会时间：</div>
            <div class="card-con-item-con ">{{$moment(data.yunXiTicketType.stime)}}-{{$moment(data.yunXiTicketType.etime)}}</div>
          </div>
          <div class="card-con-item">
            <div class="card-con-item-tit ">邀约码发放日期：</div>
            <div class="card-con-item-con ">{{$moment(data.yunXiTicket.inviteCodeDate)}}</div>
          </div>
          <div class="card-con-item">
            <div class="card-con-item-tit ">激活码：</div>
            <div class="card-con-item-con ">{{data.yunXiTicket.inviteCode}}</div>
          </div>
          <div class="card-con-item">
            <div class="card-con-item-tit ">激活日期：</div>
            <div class="card-con-item-con ">{{$moment(data.yunXiTicket.activeDate)}}</div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-tit">
          人脸信息
        </div>
        <div class="card-con">
          <div class="card-con-item">
            <div class="card-con-item-tit ">是否录脸：</div>
            <div class="card-con-item-con ">{{data.yunXiTicket.haveEnterFace==="true"?"已录脸":"未录脸"}}</div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-tit">
          备注信息
        </div>
        <div class="card-con">
          <div class="card-con-item">
            <div class="card-con-item-tit ">备注内容：</div>
            <div class="card-con-item-con ">{{data.yunXiTicket.detail}}</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import servicePub from "@/api/servicePub";
import orderType from "./../../components/rule/orderType";
export default {
  computed: {
    fieldList() {
      return this.$store.state.activityId.fieldList;
    }
  },
  data() {
    return {
      orderType: orderType,
      tableLoading: false,
      data: {}
    };
  },
  methods: {
    // 参会日期 和时间： 开始时间-
    // 激活码：
    async initFun() {
      const query = this.$route.query;
      this.tableLoading = true;
      const { data = [] } = await servicePub.queryTicketInfoByTicketId({
        activityId: this.$store.state.activityId.thisActivityId,
        ticketId: query.ticketId,
        orderCode: query.orderCode,
        orderId: query.orderId
      });
      this.tableLoading = false;
      this.data = data;
      console.log(data);
    }
  },
  created() {
    this.initFun();
  }
};
</script>

<style scoped>
.card-box {
  width: 100%;
  height: auto;
  background: #ffffff;
  border: 1px solid #d8dce6;
}
.card {
  width: 100%;
  height: auto;
}
.card-tit {
  width: 100%;
  height: auto;
  padding: 10px 16px;
  color: #909399;
  background: #f0f2f6 !important;
  font-size: 18px;
  font-weight: bold;
}
.card-con {
  width: 100%;
  height: auto;
  padding: 10px 16px;
}
.card-con-item {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-bottom: 10px;
  font-size: 16px;
}
.card-con-item-tit {
  width: 300px;
  height: auto;
  float: left;
}
.card-con-item-con {
  width: auto;
  height: auto;
  float: left;
}
</style>
